import React from 'react';
import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
import { Table } from 'antd';
import { LEVEL_TEXT, LEVEL_COLOR } from '@util/constants';

const RelatedOnedayTable = props => {
  const { data, filter = {}, onChange, total = 0, loading } = props;
  const columns = [
    {
      title: '漏洞名称',
      className: 'vul-name',
      width: '40%',
      dataIndex: 'name'
    },
    {
      title: 'CVE ID',
      dataIndex: 'cve_id',
      width: '18%',
      // eslint-disable-next-line
      render: cve_id => (cve_id ? cve_id : '-')
    },
    {
      title: '漏洞等级',
      dataIndex: 'level',
      width: 120,
      render: level => {
        return (
          <span
            style={{
              color: LEVEL_COLOR[level],
              borderColor: LEVEL_COLOR[level],
              border: '1px solid',
              borderRadius: '20px',
              padding: '2px 10px',
              fontSize: '12px'
            }}
          >
            {LEVEL_TEXT[level]}
          </span>
        );
      }
    },
    {
      title: '披露时间',
      width: 140,
      dataIndex: 'lanched'
    },
    {
      title: '操作',
      dataIndex: 'operations',
      width: 70,
      render: (operations, record) => {
        return (
          <div style={{ whiteSpace: 'nowrap' }}>
            <a
              className="be-color"
              onClick={() => props.history.push(`/vul/oneday-detection/${record._id}`, record)}
            >
              详情
            </a>
          </div>
        );
      }
    }
  ];

  const pagination = {
    current: filter.page || 1,
    pageSize: filter.pageSize || 10,
    total: total,
    showQuickJumper: true,
    showSizeChanger: true,
    showTotal: num => `共 ${num} 条`,
    size: 'small'
  };

  const onTableChange = ({ current, pageSize }) => {
    onChange(current, pageSize);
  };

  return (
    <div className="tmd-c-result-table">
      <Table
        loading={loading}
        columns={columns}
        dataSource={data}
        pagination={pagination}
        onChange={onTableChange}
      />
    </div>
  );
};

RelatedOnedayTable.propTypes = {
  data: PropTypes.array,
  filter: PropTypes.object,
  total: PropTypes.number,
  onChange: PropTypes.func,
  loading: PropTypes.bool,
  history: PropTypes.object
};

export default withRouter(RelatedOnedayTable);
